<template>
  <div class="w-100 b-sizing">
    <div class="songs" v-for="(item,index) in musicList" :key="index">
      <div
        class="outerSong d-flex b-sizing"
        @click="handleToPlay(item)"
        :class="{showPadding: !showIndex}"
      >
        <!-- :class="{activeIndex:index==0||index==1||index==2?true:false}"
          {{(index+1).toString().padStart(2,'0')}}  字符串的方法  .padStart(2,'0') 字符串长度不超过2 (前面)用0不上  padEnd后面补
          :class="{activeIndex:[0,1,2].includes(index)}"
          {{(index+1)|formatDateAndMonth}}
        -->

        <div
          v-if="showIndex"
          class="leftIndex d-flex jc-center ai-center"
          :class="{activeIndex:[0,1,2].includes(index)&&showPrimaryIndex}"
        >{{!showPrimaryIndex?index+1:(index+1).toString().padStart(2,'0')}}</div>
        <div class="song jc-between ai-center">
          <div class="left jc-between flex-1">
            <div class="all d-flex">
              <div class="name">{{item.title}}&nbsp;</div>
              <div class="al" v-if="item.al">({{item.al}})</div>
            </div>
            <div class="title ai-center">
              <div class="sq"></div>
              <div class="author">{{item.authors}}-</div>
              {{item.dsc}}
            </div>
          </div>

          <div class="right d-flex jc-center ai-center">
            <div class="play"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
import { formatDateAndMonth } from "@/utils/filters/date.js";
export default {
  name: "vueName",
  props: {
    musicList: {
      type: Array, //当type 为Array,Object default的值要有箭头函数通过return返回
      default: () => {
        return [];
      }
    },
    showIndex: {
      type: Boolean,
      default: false
    },
    showPrimaryIndex: {
      type: Boolean,
      default: true
    }
  },
  filters: {
    formatDateAndMonth
  },
  watch: {
    //   musicList(newV){
    //       console.log(newV)
    //       this.$forceUpdate()
    //   }
  },
  methods: {
    handleToPlay(item) {
      //console.log(item)
      this.$router.push("/play?id=" + item.id);
      sessionStorage.nowMusic = JSON.stringify(item); //JSON.stringify 把js对象转换成json对象    JSON.parse把json对象转换成js对象
    }
  },
  created() {},
  data() {
    return {
      msg: "Welcome to your vueName"
    };
  }
};
</script>

<style scoped lang = "scss">
.songs {
  width: 100%;
  box-sizing: border-box !important;
  .showPadding {
    padding-left: 10px;
  }
  .outerSong {
    height: 54.4px;
    margin: 6px 0px 6px 0px;
    .leftIndex {
      width: 40px;
      height: 100%;
      font-size: 17px;
      color: #999;
    }
    .activeIndex {
      color: $primary;
    }
    .song {
      display: flex;
      /* width: 100%; */
      flex: 1;
      height: 100%;
      box-sizing: border-box;

      border-bottom: 1px rgba(0, 0, 0, 0.1) solid;

      .left {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        .all {
          width: 100%;
          .name {
            height: 24px;
            font-size: 17px;
            max-width: 65%; /*如果是小于这个最大值就是他本事如40%  最大不超过65%*/
            @include ellipsis(1);
          }
          .al {
            max-width: 35%;
            overflow: hidden;
            font-size: 17px;
            color: rgba(0, 0, 0, 0.5);
            box-sizing: border-box;
            @include ellipsis(1);
          }
        }
        .title {
          display: flex;
          color: rgba(0, 0, 0, 0.6);
          height: 17px;
          box-sizing: border-box;
          .sq {
            background: url("../../../assets/img/index_icon_2x.png") no-repeat 0
              0;
            background-size: 166px 97px;
            margin: 0px 4px 0px 0px;
            box-sizing: border-box;
            width: 12px;
            height: 8px;
          }
          .author {
          }
        }
      }
    }
  }
  .right {
    box-sizing: border-box;
    height: 100%;
    width: 42px;
    .play {
      box-sizing: border-box;
      background: url("~assets/img/index_icon_2x.png") no-repeat -24px 0;
      background-size: 166px 97px;
      width: 22px;
      height: 22px;
    }
  }
}
</style>